<template>
  <div class="dialog-wrapper">
    <el-dialog
      :visible.sync="fitVisible"
      title="BOM明细"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleClose"
    >
      <el-card shadow="never" class="aui-card--fill managementWrapper">
        <div class="verticalCenter top-wrapper">
          <div class="top-left overHidden">
            <span style="color: #666">产品名称：</span>
            <el-tooltip
              class="item"
              effect="light"
              :content="bomRawSource.product_name"
              placement="top"
            >
              <span>{{ bomRawSource.product_name }}</span>
            </el-tooltip>
          </div>
          <div class="top-right overHidden">
            <span style="color: #666">规格：</span>
            <el-tooltip
              class="item"
              effect="light"
              :content="bomRawSource.sku_name"
              placement="top"
            >
              <span>{{ bomRawSource.sku_name }}</span>
            </el-tooltip>
          </div>
        </div>
        <div class="mod-sys__user">
          <el-table
            :data="showList"
            :span-method="objectSpanMethod"
            style="width: 100%"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              header-align="center"
              align="center"
              width="80"
            ></el-table-column>

            <!-- <el-table-column
              prop="toolsKinds"
              label="设备类别"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="toolsName"
              label="设备名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="price"
              label="价格（元）"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
            ></el-table-column> -->
            <el-table-column
              prop="material_serial"
              label="物料编码"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="物料名称"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="specifications_model"
              label="规格型号"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="所需数量"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="supplier_name"
              label="执行单位"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="执行数量"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <template slot="footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ChooseSupply from "./choose-supply";
import { getSupplierBomList } from "@/api";
export default {
  components: {
    ChooseSupply,
  },
  props: {
    bomRawSource: {
      type: Object,
    },
    isAdd: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dataForm: {},
      fitVisible: true,
      showList: [
        // {
        //   toolsKinds: "螺丝刀",
        //   toolsName: "一号螺丝刀",
        //   price: 10,
        //   remark: "",
        // },
        // {
        //   toolsKinds: "螺丝刀",
        //   toolsName: "二号螺丝刀",
        //   price: 20,
        //   remark: "",
        // },
        // {
        //   toolsKinds: "螺丝刀",
        //   toolsName: "三号螺丝刀",
        //   price: 30,
        //   remark: "",
        // },
        // {
        //   toolsKinds: "扳手",
        //   toolsName: "大号扳手",
        //   price: 88,
        //   remark: "",
        // },
        // {
        //   toolsKinds: "扳手",
        //   toolsName: "中号扳手",
        //   price: 44,
        //   remark: "",
        // },
        // {
        //   toolsKinds: "老虎钳子",
        //   toolsName: "火星专供老虎钳",
        //   price: 999,
        //   remark: "",
        // },
        // {
        //   toolsKinds: "老虎钳子",
        //   toolsName: "土星专供老虎钳",
        //   price: 1001,
        //   remark: "",
        // },
      ],
      cellList: [], // 单元格数组
      count: null, // 计数
    };
  },
  mounted() {
    // 第1步，根据表体信息，计算合并单元格的信息

    this.transTable();
  },
  methods: {
    computeCell(showList) {
      // 循环遍历表体数据
      for (let i = 0; i < showList.length; i++) {
        if (i == 0) {
          // 先设置第一项
          this.cellList.push(1); // 初为1，若下一项和此项相同，就往cellList数组中追加0
          this.count = 0; // 初始计数为0
          console.log("索引", 0, this.count);
        } else {
          // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
          if (showList[i].material_id == showList[i - 1].material_id) {
            // 如果相等
            this.cellList[this.count] += 1; // 增加计数
            this.cellList.push(0); // 相等就往cellList数组中追加0
            console.log("索引", i, this.count);
          } else {
            this.cellList.push(1); // 不等就往cellList数组中追加1
            this.count = i; // 将索引赋值为计数
            console.log("索引", i, this.count);
          }
        }
      }
    },

    // 第2步，将计算好的结果返回给el-table，这样的话表格就会根据这个结果做对应合并列渲染
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 给第二列做单元格合并。0是第一列，1是第二列。
      if (
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4
      ) {
        console.log("单元格数组，若下一项为0，则代表合并上一项", this.cellList);
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          console.log(
            `动态竖向合并单元格, 第${colCell}列，竖向合并${rowCell}个单元格 `
          );
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
          // 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    handleClose() {
      this.$emit("handleClose");
    },
    transTable() {
      console.log(this.bomRawSource);
      let arr = [];
      for (let i = 0; i < this.bomRawSource.bom_list.length; i++) {
        let bomList = this.bomRawSource.bom_list;
        for (let j = 0; j < bomList[i].execute_list.length; j++) {
          let execList = bomList[i].execute_list;
          arr.push({
            material_id: bomList[i].material_id,
            material_serial: bomList[i].material_serial,
            name: bomList[i].name,
            specifications_model: bomList[i].specifications_model,
            total: bomList[i].total,
            supplier_name: execList[j].supplier_name,
            num: execList[j].num,
          });
        }
      }
      this.showList = arr;
      console.log(arr);
      this.computeCell(arr);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  ::v-deep .el-dialog {
    width: 60% !important;
  }
  .managementWrapper {
    .top-wrapper {
      font-size: 16px;
      margin-bottom: 24px;
      .top-left {
        max-width: 20vw;
      }
      .top-right {
        margin-left: 24px;
        max-width: 10vw;
      }
    }
    .prodBox {
      padding-left: 6px;
      .imgBox {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightBox {
        margin-left: 14px;
        text-align: left;
        .top {
          max-width: 200px;
          margin-bottom: 6px;
        }
        .bottom {
          color: $mainColor;
        }
      }
    }
  }
}
</style>